<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
    <div id="wrapper">
        <!-- Navigation -->
        <#include "/inc/nav.ftl"/>
        <@nav/>
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel-body">
                        <button id="btn-add" type="button" class="btn btn-success">添加商品类型</button>
                        <button id="btn-edit" type="button" class="btn btn-warning">修改商品类型</button>
                        <button id="btn-del" type="button" class="btn btn-danger">删除商品类型</button>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">商品类型列表</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>商品类型名</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

            <div class="modal fade" id="myModal" tabindex="-1" type="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">标题</h4>
                        </div>
                        <input id="id" type="hidden" class="form-control">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <form type="form" id="form">
                                        <input id="hiddenText" type="text" style="display:none">
                                        <div class="form-group">
                                            <label>商品类型名</label>
                                            <input id="typeName" type="text" class="form-control">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="btn-submit" type="submit" class="btn btn-default">提交</button>
                            <button id="btn-reset" type="reset" class="btn btn-default">重置</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>

        </div>
    </div>
    <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
    <!-- Page-Scripts  -->
    <script>
        /* 模态框自动聚焦 */
        $(function() {
            $('#myModal').on('shown.bs.modal', function(e) {

                $('#typeName').focus(); //通过ID找到对应输入框，让其获得焦点

            });
        })

        /* 回车提交 */
        $('#typeName').keyup(function(event) {
            if (event.keyCode == 13) {
                $("#btn-submit").trigger("click");
            }
        });
        $(document).ready(function() {
            var table = $('#list').DataTable({
                "ajax": '${contextPath}/type/list',
                "language": {
                    "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"
                },
                "columns": [{
                    "data": "id",
                    "visible": false
                }, {
                    "data": "typeName"
                }],
                responsive: true,
                select: true //datatables select 插件
            });

            /* 添加按钮 */
            $('#btn-add').click(function() {
                resetForm();
                $("#myModal #id").val("");
                $("#myModal #myModalLabel").text("添加商品类型");
                $('#myModal').modal({
                    keyboard: false,
                    show: true
                })
            });
            /* 修改按钮 */
            $('#btn-edit').click(function() {
                var rowData = table.rows({
                    selected: true
                }).data().toArray();
                if (rowData.length == 1) {
                    var id = rowData[0].id;
                    $.ajax({
                        type: "get",
                        url: "${contextPath}/type/edit",
                        data: {
                            "id": id
                        },
                        dataType: "json",
                        success: function(json) {
                            $("#myModal #id").val(json.type.id);
                            $("#myModal #typeName").val(json.type.typeName);
                        }
                    });
                    $("#myModal #myModalLabel").text("修改商品类型");
                    $('#myModal').modal({
                        keyboard: false,
                        show: true
                    })
                } else {
                    layer.msg('请选择一行!', {
                        time: 1000,
                        icon: 7
                    }); //layer弹出层，1000代表1秒后关闭。7为图标编号
                }
            });

            /* 删除按钮 */
            $('#btn-del').click(function() {
                this.blur();
                var rowData = table.rows({
                    selected: true
                }).data().toArray(); //得到datatables选中行的值并转成数组
                if (rowData.length == 1) {
                    layer.msg('你确定删除该商品类型吗?', {
                        time: 0,
                        // skin: 'layui-layer-moon',
                        title: "删除商品类型",
                        success: function(layero, index) {
                            function fn(event) {
                                if (event.keyCode === 27) {
                                    layer.close(index)
                                }
                                if (event.keyCode === 13) {
                                    $('.layui-layer-btn0').click();
                                }
                            }
                            $(window).one('keydown', fn);
                        },
                        area: ['300px', '180px'],
                        fixed: false, //不固定
                        btn: ['确定', '取消'],
                        yes: function(index) {
                            del(rowData[0].id);
                            layer.close(index);
                        }
                    });
                } else {
                    layer.msg('请选择一行!', {
                        time: 1000,
                        icon: 7
                    });
                }

            });

            /* 表单添加、修改提交按钮 */
            $("#myModal #btn-submit").click(function() {
                var id = $("#myModal #id").val();
                if (id == null || id == "") { //将添加和编辑表单合二为一。根据ID是否为空判断到底是添加还是修改。
                    submit("${contextPath}/type/save");
                } else {
                    submit("${contextPath}/type/update");
                }
            });

            $("#myModal #btn-reset").click(function() {
                resetForm();
            });

            /* 清空表单 */
            function resetForm() {
                $("#myModal #typeName").val("");
            }

            /* 表单提交操作 */
            function submit(url) {
                var id = $("#myModal #id").val();
                var typeName = $("#myModal #typeName").val();
                $.ajax({
                    type: "post",
                    url: url,
                    dataType: "json",
                    data: {
                        "type.id": id, //注意此处的type与type对应，id与type的属性id对应
                        "type.typeName": typeName
                    },
                    success: function(data) {
                        if (data.result) {
                            layer.msg(data.msg, {
                                time: 1000,
                                icon: 1
                            });
                            resetForm();
                            $("#myModal").modal('hide');
                            table.ajax.reload(); //重新加载table
                        } else {
                            layer.msg(data.msg, {
                                time: 1000,
                                icon: 1
                            });
                            resetForm();
                        }
                    },
                    error: function() {
                        layer.msg('操作失败!', {
                            time: 1000,
                            icon: 2
                        });
                    }
                });
            }
            /* 删除操作 */
            function del(id) {
                $.ajax({
                    type: "post",
                    url: "${contextPath}/type/delete",
                    dataType: "json",
                    data: {
                        "id": id
                    },
                    success: function(data) {
                        if (data.result) {
                            layer.msg(data.msg, {
                                time: 1000,
                                icon: 1
                            });
                            table.ajax.reload();
                        }
                    },
                    error: function() {
                        layer.msg('系统出错!', {
                            time: 1000,
                            icon: 2
                        });
                    }
                });
            }


        });
    </script>
</body>

</html>